<template>
  <!-- 收货启动,记录卸货人 -->
		<div class="ywshouhuo_xhr">

			<van-nav-bar :fixed="true" class="navBar" title="取消收货" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
				<div class="goodsFromWarp">
						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">预检单号：</div>
								</div>
								<van-field
									 clearable
									 class="skuInput"
									 v-model="editForm.bill"
									 @keyup="onEnter($event,do_inputspbar)"
									 placeholder="请填写预检单号"
								 />
								<div class="searchBtn">
									<button :disabled="isdisabled"  @click.stop="searchGoodsBtn()" >
										<van-icon name="search" size="20" color="#1989fa"  />
									</button>
								</div>
						</div>

						<div class="showMessage" style="margin-top:10px;">{{skuRowMessage1}}</div>
						<div class="showMessage">{{skuRowMessage2}}</div>
				</div>


				<div class="skuBtn" style="justify-content: flex-end;">
					<van-button type="info" :disabled="isdisabled" @click="baocunClick()">取消收货</van-button>
				</div>




				<div class="carCardWarp">
					<div class="carCard" v-for="(item,index) in skuData" :key="index">

						<div class="goodsTitleRow">
								<div class="goodsTitleLabel">
									<div class="skuName">商品名称：</div>
								</div>
								<div class="skuNoTitle">
									{{item.subsname}}
								</div>
						</div>

						<div class="goodsTitleRow" style="margin-top: 10px;">
								<div class="goodsTitleLabel">
									<div class="skuName">商品编码：</div>
								</div>
								<div class="skuNoTitle">
									{{item.itemid}}
								</div>
						</div>

						<van-row class="goodRow" style="margin-top: 10px;">
						  <van-col span="12"> <span>主标签:</span> {{item.shserno_z}}</van-col>
							<van-col span="12"> <span>标签:</span> {{item.shserno_s}}</van-col>
						</van-row>


						<van-row class="goodRow" style="margin-top: 10px;">
						  <van-col span="12"> <span>箱数:</span> {{item.pack}}</van-col>
						  <van-col span="12"> <span>箱装:</span> {{item.unit}}</van-col>
						</van-row>

						<van-row class="goodRow" style="margin-top: 10px;">
						  <van-col span="12"> <span>散数:</span> {{item.qty}}</van-col>
						  <van-col span="12"> <span>总数量:</span> {{item.totqty}}</van-col>
						</van-row>
						<van-row class="goodRow" style="margin-top: 10px;">
						  <van-col span="24"> <span>生产日期:</span> {{item.p_date}}</van-col>
						</van-row>
					</div>
				</div>



				<!-- 预检单列表 -->
				<van-overlay :show="isVisible" :lock-scroll="false">
					<div class="shipandanWrapper">
							<van-sticky>
								<van-nav-bar class="navBar" title="收货单列表" left-arrow @click-left="isVisible = false"></van-nav-bar>
							</van-sticky>
							<div class="shipandanCon" @click.stop>
									<div  v-for="(row,i) in tableData" :key="i" class="danjuRow" @click="selecClick(row,i)" >
										<van-row class="skuList" >
										  <van-col span="24"> <span style="width:100px;">单据类型:</span> {{fmartStatus(row.djtype)}}</van-col>
										</van-row>

										<van-row class="skuList">
											<van-col span="24"> <span style="width: 100px;" >单号	：</span> {{row.bill}}</van-col>
										</van-row>

										<van-row class="skuList"  >
											<van-col span="12"> <span style="width: 100px;" >仓别：</span> {{row.cb}}</van-col>
											<van-col span="12"> <span style="width: 100px;">库位：</span> {{row.posin}}</van-col>
										</van-row>


										<van-row class="skuList"  >
											<van-col span="24"> <span style="width:100px;" >供应商：</span> {{row.vendor}}</van-col>
										</van-row>

										<van-row class="skuList"  >
											<van-col span="24"> <span style="width:100px;" >门店：</span> {{row.storeid}}</van-col>
										</van-row>

									</div>
							</div>
					</div>
				</van-overlay>



				<van-overlay :show="isMessageVisible" :lock-scroll="false">
					<div class="messageWarp">
							<div class="messageCon">
									<div class="messageTitle">取消收货单</div>

									<div class="messageHeader">
											<div class="messageLabel">收货单：</div>
											<div class="messageValue">{{editForm.bill}}</div>
									</div>

									<div class="messageHeader" style="line-height: 20px;">
										{{skuRowMessage2}}
									</div>



									<div class="messageHeader" style="color: #f00;">
											是-删除收货单
									</div>

									<div class="messageHeader" style="color: #f00; line-height: 20px;">
											否-取消结单
									</div>

									<div class="messageHeader" style="color: #f00; line-height: 20px;">
											取消不做任何操作
									</div>

									<div class="messageHeader" style="color: #f00; line-height: 20px;">
											是否继续请确认？
									</div>


									<div class="messageFooter">
										<div @click="querenNum(1)">是</div>
										<div @click="querenNum(2)">否</div>
										<div @click="isMessageVisible = false">取消</div>
									</div>
							</div>
					</div>
				</van-overlay>


		</div>

</template>

<script>
import { mapActions } from "vuex";
export default {
  name: 'quxiaoshouhuo',
  data () {
    return {
			editForm:{
				bill:'', //预检单号
				cb: "",
				djtype: "",
				posin: "",
				status: "",
				storeid: "",
				vendor: "",
				wlstatus: "",
			},
			skuRowMessage1:'',
			skuRowMessage2:'',
			isdisabled:false,
			tableData:[
				{
					bill:''
				}
			],
			carMessageIsShow:false,
			isVisible:false,
			skuData:[
				{
					subsname:''
				}
			],
			wlstatus:'',
			isMessageVisible:false,
    }
  },
  methods: {
		 ...mapActions(["showLoading", "hideLoading"]),
		 fmartStatus(djtype){
				if(djtype == 'SH'){
					return '收货单'
				}else if(djtype == 'DBSH'){
					return '调拨收货单'
				}else if(djtype == 'PSFC'){
					return '配送返仓单'
				}else if(djtype == 'DD'){
					return '收货单'
				}
		 },
		 selecClick(row){
			 this.editForm.bill = row.bill
			 this.editForm.cb = row.cb
			 this.editForm.djtype = row.djtype
			 this.editForm.posin = row.posin
			 this.editForm.status = row.status
			 this.editForm.storeid = row.storeid
			 this.editForm.vendor = row.vendor
			 this.editForm.wlstatus = row.wlstatus
			 this.searchGoodsXiaoYan()
			 this._getSkuList()
			 this.isVisible = false
		 },
		 _getSkuList(){
				console.log(this.editForm)
				var _self = this;
				var ldemodata = [{retval:0, errmsg:'返回数据集'},]
				this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_shouhuo',
					'i':this.FNULLE([
						'opmode','Y_SHJD_qryshserno',
						'kqid', this.ryuser.kqid,
						'czyid',this.ryuser.operatorid,
						'bill',this.editForm.bill,
						'djtype',this.editForm.djtype,
					])
					}, '商品查询',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
					if(ret_iserr){ //传入的true参数,理论上不会有此回调了
						_self.$toast.fail('查询失败')
						_self.$store.commit('hideLoading');
					}else{
						var rtn_json_obj = null;
						_self.$store.commit('hideLoading');
						if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
						}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
						}
						console.log("得到商品查询")
						console.log(rtn_json_obj)
						_self.skuData = rtn_json_obj
					}
				});
		 },
		 searchGoodsXiaoYan(){
			 console.log(this.editForm)
			 var _self = this;
			 var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			 this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_shouhuo',
				'i':this.FNULLE([
					'opmode','Y_QXSH_jybill',
					'kqid', this.ryuser.kqid,
					'czyid',this.ryuser.operatorid,
					'bill',this.editForm.bill,
					'djtype',this.editForm.djtype,
				])
				}, '取消校验单据查询',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到取消校验单据查询")
					console.log(rtn_json_obj)
					_self.skuRowMessage1 = rtn_json_obj[0].ret_mess1
					_self.skuRowMessage2 = rtn_json_obj[0].ret_mess2
					_self.wlstatus = rtn_json_obj[0].wlstatus
				}
			 });
		 },
		 do_inputspbar(pmtxt){
			 console.log(pmtxt)  //扫描枪获取的参数
			 this.editForm.bill = pmtxt
			 this.searchGoodsBtn()
		 },
		 searchGoodsBtn(){
			 console.log(this.editForm)
			 var _self = this;
			 var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			 this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_shouhuo',
				'i':this.FNULLE([
					'opmode','Y_QXSH_qrybill',
					'kqid', this.ryuser.kqid,
					'czyid',this.ryuser.operatorid,
					'bill',this.editForm.bill,
				])
				}, '预检单号查询',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到预检单查询")
					console.log(rtn_json_obj)
					_self.tableData = rtn_json_obj
					if(_self.tableData.length >0){
						_self.isVisible = true
					}else{
						_self.$toast.fail('暂无预检单')
					}
				}
			 });
		 },
		 baocunClick(){
			 if(this.editForm.bill>'' && this.skuRowMessage2 >'' && this.wlstatus == 'J'){
				 this.isMessageVisible = true
			 }
		 },
		 querenNum(index){
			 console.log(index)
			 var _self = this;
			 var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			 this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_shouhuo',
					'i':this.FNULLE([
						'opmode','Y_QXSH_deletebill',
						'kqid', this.ryuser.kqid,
						'czyid',this.ryuser.operatorid,
						'bill',this.editForm.bill,
						'djtype',this.editForm.djtype,
						'deletetype',index,
					])
					}, '取消收货单保存',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
					if(ret_iserr){ //传入的true参数,理论上不会有此回调了
						_self.$toast.fail('查询失败')
						_self.$store.commit('hideLoading');
					}else{
						var rtn_json_obj = null;
						_self.$store.commit('hideLoading');
						if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
						}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
						}
						console.log("得到取消收货单保存")
						console.log(rtn_json_obj[0])
						if(rtn_json_obj[0].ret_ret == '0'){
							_self.$toast.fail(rtn_json_obj[0].ret_mess)
							_self.editForm.bill = ''
							_self.skuRowMessage1 = ''
							_self.skuRowMessage2 = ''
							_self.skuData = []
							_self.isMessageVisible = false
						}else{
							_self.$dialog.alert({title: '提示',message:rtn_json_obj[0].ret_mess,confirmButtonColor:'#f00'})
						}
					}
			 });
		 },
  },
  components:{

  },
  computed: {
     ryuser: function(){
       return this.GWO(true).gUSER;
     }
  },
  mounted :function(){
    var _self = this; window.GWO().debug=this;
  }
}

</script>
<style scoped lang="scss">
// 引入公共样式
@import '@/assets/css/base.scss';
@import '@/assets/css/input.scss';
.ywshouhuo_xhr{
	padding-top:50px;
	padding-bottom: 50px;
}
.xiehuoren{
	width:100px;
	font-size: 12px;
	margin-left: 10px;
}

.tishiMessage{
	width: 100%;
	height: 30px;
	// background-color: #f40;
	font-size: 13px;
}

.messageConTitle{
	margin-top: 10px;
	margin-bottom: 10px;
	box-sizing: border-box;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}


div.carCardWarp{
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
	div.carCard{
		border-left: 5px solid #4998FF;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		border-radius:5px;
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom:15px;
		div.goodRow{
			margin-bottom:8px;
			span{
				display: inline-block;
				width:100px;
			}
		}
		div.goodsTitleRow{
			display: flex;
			width: 100%;
			div.goodsTitleLabel{
				width: 100px;
			}
			div.skuNoTitle{
				width: calc(100% - 100px);
			}
		}
	}
}

div.showMessage{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}


div.messageWarp{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 20px;
		div.messageCon{
			width:80%;
			height:320px;
			background-color: #fff;
			border-radius: 10px;
			position: relative;
			.messageTitle{
				width: 100%;
				background-color: #1989fa;
				height: 38px;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;
			}
			.messageHeader{
				display: flex;
				// height: 30px;
				box-sizing: border-box;
				padding:5px 5%;
				font-size: 14px;
				width: 100%;
				div.messageLabel{
					width: 80px;
				}
				div.messageValue{
					width: calc(100% - 80px);
					white-space: normal
				}
			}
			div.messageFooter{
				display: flex;
				width: 100%;
				height: 41px;
				position: absolute;
				left: 0;
				bottom: 0;
				// background-color: #1989fa;
				div{
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
				}
				div:nth-child(1){
					color: #1989fa;
				}

				div:nth-child(2){
					color: #1989fa;
				}
			}
		}
	}

</style>

